﻿<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="../helpproject.xsl" ?>
<topic template="Default" lasteditedby="Geert" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../helpproject.xsd">
  <title translate="true">UIVisualizerService</title>
  <keywords>
    <keyword translate="true">IUIVisualizerService</keyword>
    <keyword translate="true">MVVM</keyword>
    <keyword translate="true">Services</keyword>
    <keyword translate="true">UIVisualizerService</keyword>
  </keywords>
  <body>
    <header>
      <para styleclass="Heading1"><text styleclass="Heading1" translate="true">UIVisualizerService</text></para>
    </header>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">The </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_MVVM_Services_IUIVisualizerService" styleclass="Normal" translate="true">IUIVisualizerService</link><text styleclass="Normal" translate="true"> allows a developer to show (modal) windows or dialogs without actually referencing a specific view. Internally, the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_MVVM_Services_UIVisualizerService" styleclass="Normal" translate="true">UIVisualizerService</link><text styleclass="Normal" translate="true"> uses the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="MVVM_Locators_ViewLocator" styleclass="Normal" translate="true">ViewLocator</link><text styleclass="Normal" translate="true"> to resolve views.</text></para>
    <para styleclass="Normal"><table styleclass="Default" rowcount="8" colcount="2">
      <tr style="vertical-align:top">
        <td style="width:181px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" style="font-weight:bold;" translate="true">Feature</text></para>
        </td>
        <td style="width:82px;">
          <para styleclass="Normal (list)" style="text-align:center;"><text styleclass="Normal (list)" style="font-weight:bold;" translate="true">Supported</text></para>
        </td>
      </tr>
      <tr style="vertical-align:top">
        <td style="width:181px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">WPF</text></para>
        </td>
        <td style="width:82px;">
          <para styleclass="Normal (list)" style="text-align:center;"><image src="supported.png" scale="100.00%" styleclass="Normal (list)"></image></para>
        </td>
      </tr>
      <tr style="vertical-align:top">
        <td style="width:181px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">Silverlight 4</text></para>
        </td>
        <td style="width:82px;">
          <para styleclass="Normal (list)" style="text-align:center;"><image src="supported.png" scale="100.00%" styleclass="Normal (list)"></image></para>
        </td>
      </tr>
      <tr style="vertical-align:top">
        <td style="width:181px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">Silverlight 5</text></para>
        </td>
        <td style="width:82px;">
          <para styleclass="Normal (list)" style="text-align:center;"><image src="supported.png" scale="100.00%" styleclass="Normal (list)"></image></para>
        </td>
      </tr>
      <tr style="vertical-align:top">
        <td style="width:181px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">Windows Phone 7 Mango</text></para>
        </td>
        <td style="width:82px;">
          <para styleclass="Normal (list)" style="text-align:center;"><image src="notsupported.png" scale="100.00%" styleclass="Normal (list)"></image></para>
        </td>
      </tr>
      <tr style="vertical-align:top">
        <td style="width:181px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">Windows Phone 8</text></para>
        </td>
        <td style="width:82px;">
          <para styleclass="Normal (list)" style="text-align:center;"><image src="notsupported.png" scale="100.00%" styleclass="Normal (list)"></image></para>
        </td>
      </tr>
      <tr style="vertical-align:top">
        <td style="width:181px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">Windows RT</text></para>
        </td>
        <td style="width:82px;">
          <para styleclass="Normal (list)" style="text-align:center;"><image src="notsupported.png" scale="100.00%" styleclass="Normal (list)"></image></para>
        </td>
      </tr>
      <tr style="vertical-align:top">
        <td style="width:181px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">Test/emulation service</text></para>
        </td>
        <td style="width:82px;">
          <para styleclass="Normal (list)" style="text-align:center;"><image src="supported.png" scale="100.00%" styleclass="Normal (list)"></image></para>
        </td>
      </tr>
    </table></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Screenshot</text></para>
    <para styleclass="Normal"><image src="services_uivisualizerservice.png" scale="100.00%" styleclass="Image Caption"></image></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Showing a non-modal window</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">To show a non-modal window, use the following code:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">var viewModel = </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">new</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> EmployeeViewModel();</text><br/><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">var uiVisualizerService = GetService&lt;IUIVisualizerService&gt;();</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">uiVisualizerService.Show(viewModel);</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Showing a modal window</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">To show a modal window, use the following code:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">var viewModel = </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">new</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> EmployeeViewModel();</text><br/><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">var uiVisualizerService = GetService&lt;IUIVisualizerService&gt;();</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">uiVisualizerService.ShowDialog(viewModel);</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Showing a window with callback</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">To show a (modal or non-modal) window and get a callback as soon as the window is closed, use the following code:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">var viewModel = </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">new</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> EmployeeViewModel();</text><br/><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">var uiVisualizerService = GetService&lt;IUIVisualizerService&gt;();</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">uiVisualizerService.Show(viewModel, OnWindowClosed);</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Registering a window</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">To register a custom window which is not automatically detected via reflection, it is required to use the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="M_Catel_MVVM_Services_IUIVisualizerService_Register_2_51881acd" styleclass="Normal" translate="true">Register</link><text styleclass="Normal" translate="true"> method:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">var uiVisualizerService = GetService&lt;IUIVisualizerService&gt;();</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">uiVisualizerService.Register(</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">typeof</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">(EmployeeViewModel), </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">typeof</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">(EmployeeView));</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Using naming conventions to find windows</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">Please see the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="MVVM_Locators_ViewLocator" styleclass="Normal" translate="true">ViewLocator</link><text styleclass="Normal" translate="true"> topic.</text></para>
  </body>
</topic>
